<template>
  <div class="layout-wrap">
    <el-container class="layout-container">
      <!-- 页面头部 -->
      <el-header class="layout-header">
        <LayoutHeader title="kraken-admin"></LayoutHeader>
      </el-header>
      <el-container>
        <!-- 菜单 -->
        <el-aside width="200px" class="aside">
          <el-menu active-text-color="#145b7d" default-active="1">
            <el-menu-item
              v-for="(item, index) in menuList"
              :key="index"
              :index="(index + 1).toString()"
              @click="toPage(item)"
            >
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 页面主体 -->
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import LayoutHeader from '@/components/LayoutHeader.vue'

const router = useRouter()

const menuList = reactive([
  { title: '今天', path: '/menuList', query: { type: 1 } },
  { title: '重要', path: '/menuList', query: { type: 2 } },
  { title: '计划内', path: '/menuList', query: { type: 3 } },
  { title: '待办', path: '/menuList', query: { type: 4 } },
  { title: '全部', path: '/menuList', query: { type: 5 } },
  { title: '已完成', path: '/menuList', query: { type: 6 } },
  { title: '回收站', path: '/menuList', query: { type: 7 } }
])

const toPage = (data: any) => {
  router.push({
    path: data.path,
    query: data.query
  })
}
</script>

<style lang="less" scoped>
.layout-wrap {
  position: relative;
  height: 100%;
  width: 100%;

  .layout-container {
    height: 100%;
    .layout-header {
      background-color: #145b7d;
    }
  }
}
</style>
